<template>
    <div class="detailsBg">
          
        <div class="detailsBox">
            <div v-for="item in orderStatusList" class="detailsItem">
                <img v-if="item.type ==1" class="Image" src="../../assets/images/order1.png" alt="">
                <img v-if="item.type ==2" class="Image" src="../../assets/images/order2.png" alt="">
                <img v-if="item.type ==3" class="Image" src="../../assets/images/order3.png" alt="">
                <img v-if="item.type ==4" class="Image" src="../../assets/images/order4.png" alt="">
                <img v-if="item.type ==5" class="Image" src="../../assets/images/order5.png" alt="">
                <img v-if="item.type ==6" class="Image" src="../../assets/images/order6.png" alt="">
                <img v-if="item.type ==7" class="Image" src="../../assets/images/order7.png" alt="">
                <img v-if="item.type ==8" class="Image" src="../../assets/images/order8.png" alt="">
                <div v-if="item.type<detailsData.payStatus" style="margin-top:20px;color:#ccc">
                    {{item.title}}
                </div>
                <div v-else-if="item.type > detailsData.payStatus" style="margin-top:20px;color:red">
                    {{item.title}}
                </div>
                <div v-else style="margin-top:20px;color:#5ecb87">
                    {{item.title}}
                </div>
                <img v-if="item.type == detailsData.payStatus" class="ImageDui" src="../../assets/images/dui.png" alt="">
            </div>
    
        </div>
    
       <div class="cotentBox">
         <n-card title="商品信息">
            <div class="content">
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">商品ID</div>
                    <span style="color:#303133">{{detailsData.goods_id}}</span>
                </div>
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">商品名称</div>
                    <span style="color:#303133">{{detailsData.goodsName}}</span>
                </div>
                <div class="contentItem" v-if="detailsData.goods_sku == ''">
                    <div style="font-weight:500;width:120px">商品价格</div>
                    <span style="color:red">￥{{(detailsData.goods_info.goodsPrice)}}</span>
                </div>
                <div class="contentItem" v-if="detailsData.goods_sku == '' && detailsData.goods_info.goods_unit_num">
                    <div style="font-weight:500;width:120px">单位规格</div>
                    <span style="color:#aaa">{{(detailsData.goods_info.goods_unit_num)}}</span>
                </div>
                
                
                <div class="contentItem" >
                    <div style="font-weight:500;width:120px">商品规格</div>
                    <span style="color:#303133">{{detailsData.goods_sku?'多规格' : '单规格'}}</span>
                </div>

                <div class="contentItem" v-if="detailsData.goods_sku">
                    <div style="font-weight:500;width:120px">规格ID</div>
                    <span style="color:#303133">{{detailsData.goods_sku.skuId}}</span>
                </div>
                <div class="contentItem" v-if="detailsData.goods_sku">
                    <div style="font-weight:500;width:120px">规格名</div>
                    <span style="color:#303133">{{detailsData.goods_sku.skuName}}</span>
                </div>
                <div class="contentItem" v-if="detailsData.goods_sku">
                    <div style="font-weight:500;width:120px">规格价格</div>
                    <span style="color:red">￥{{detailsData.goods_sku.skuPrice}}</span>
                </div>
                 <div class="contentItem" v-if="detailsData.goods_sku">
                    <div style="font-weight:500;width:120px">商品图片</div>
                    <n-image
                        width="60"
                        :src="detailsData.goods_sku.skuImage"
                    />
                </div>

                <div class="contentItem" v-if="!detailsData.goods_sku">
                    <div style="font-weight:500;width:120px">商品图片</div>
                    <n-image
                        width="60"
                        :src="Https()+ detailsData.previewUrl"
                    />
                </div>
          
            </div>
        </n-card>

        <n-card title="店铺信息" v-if="detailsData.business_id">
            <div class="content">
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">店铺ID</div>
                    <span style="color:#303133">{{detailsData.business_id}}</span>
                </div>
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">店铺名称</div>
                    <span style="color:#303133">{{setStore(detailsData)}}</span>
                </div>
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">店铺LOGO</div>
                    <n-image
                        width="60"
                        :src="setStore1(detailsData)"
                    />
                </div>
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">店铺地址</div>
                    <span style="color:#303133">{{setStore2(detailsData)}}</span>
                </div>
                 <div class="contentItem">
                    <div style="font-weight:500;width:120px">店铺号码</div>
                    <span style="color:#303133">{{setStore3(detailsData)}}</span>
                </div>
            </div>
        </n-card>

        <n-card title="用户信息" v-if="detailsData.user_info">
            <div class="content">
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">用户openid</div>
                    <span style="color:#303133">{{detailsData.user_info.openid}}</span>
                </div>
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">用户名称</div>
                    <span style="color:#303133">{{detailsData.user_info.nickName}}</span>
                </div>
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">用户头像</div>
                    <n-image
                        width="60"
                        :src="detailsData.user_info.head_img"
                    />
                </div>
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">收货地址</div>
                    <span style="color:#303133">{{setAddress(detailsData.address_id)}}</span>
                </div>
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">电话号码</div>
                    <span style="color:#303133">{{detailsData.user_info.phone}}</span>
                </div>
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">用户备注</div>
                    <span style="color:#303133">{{detailsData.memo || '暂无'}}</span>
                </div>
               
            </div>
        </n-card>
         <n-card title="订单信息">
            <div class="content">
                 <div class="contentItem">
                    <div style="font-weight:500;width:120px">订单类型</div>
                    <span style="color:#303133">{{setOrder_type(detailsData)}}</span>
                </div>
                <div class="contentItem" v-if="detailsData.total_money">
                    <div style="font-weight:500;width:120px">支付方式</div>
                    <span style="color:#303133">{{setPaypal_type(detailsData)}}</span>
                </div>
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">订单ID</div>
                    <span style="color:#303133">{{detailsData.order_id}}</span>
                </div>
                <div class="contentItem" v-if="detailsData.total_money">
                    <div style="font-weight:500;width:120px">支付金额</div>
                    <span style="color:red">￥{{detailsData.total_money}}</span>
                </div>
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">商品购买数量</div>
                    <span style="color:#000">{{detailsData.goodsQuantity}}件</span>
                </div>
                <div class="contentItem">
                    <div style="font-weight:500;width:120px">下单时间</div>
                    <span style="color:#303133">{{detailsData.ctime}}</span>
                </div>
                <div class="contentItem" v-if="detailsData.total_mone">
                    <div v-for="item in orderStatusList" >
                        <div v-if="item.type == detailsData.payStatus" style="font-weight:500;width:120px">{{item.title}}时间</div>
                    </div>
                    <span style="color:#303133">{{detailsData.utime}}</span>
                </div>
                
                 <div class="contentItem" v-if="detailsData.goods_info">
                    <div style="font-weight:500;width:120px">配送方式</div>
                    <span style="">{{(detailsData.goods_info.goodsType)}}</span>
                </div>

                <div class="contentItem">
                    <div style="font-weight:500;width:120px">配送费用</div>
                    <span style="color:#303133">{{setdistribution_type(detailsData)}}</span>
                </div>

                <div class="contentItem" v-if="detailsData.coupon_id">
                    <div style="font-weight:500;width:120px">优惠信息</div>
                    <span style="color:#303133">{{useCoupons(detailsData.coupon_id)}}</span>
                </div>


            </div>
        </n-card>
        <n-card title="订单日志">
            <div class="content">
                 <div class="contentItem" v-for="(item,index) in orderLogList" :key="index">
                    <div style="font-weight:500;width:80px">日志{{index+1}}</div>
                    <div style="font-weight:500;width:200px">{{item.ctime}}</div>
                    <span style="color:#303133">{{item.order_log}}</span>
                </div>
                 
            </div>
        </n-card>
       </div>  
    </div>
</template>

<script setup lang="ts">
import Upload from "@/views/upload/index.vue"
import api from './api'
import { nextTick, onMounted, ref } from 'vue'
import { Https } from "@/utils"
const route = useRoute()
const orderStatusList = ref([
    {
        title:'待付款',
        image:'../../assets/images/order1.png',
        type:1
    },
     {
        title:'支付中',
         image:'../../assets/images/order1.png',
         type:2
    },
     {
        title:'已支付',
        image:'../../assets/images/order1.png',
        type:3
    },
     {
        title:'待发货',
        image:'../../assets/images/order1.png',
        type:4
    },
     {
        title:'已发货',
        image:'../../assets/images/order1.png',
        type:5
    },
     {
        title:'待收货',
        image:'../../assets/images/order1.png',
        type:6
    },
    {
        title:'已收货',
        image:'../../assets/images/order1.png',
        type:7
    },{
        title:'已退款',
        image:'../../assets/images/order1.png',
        type:8
    },
])

const setOrder_type = (item) =>{
   
//   订单类型，1普通订单，2月卡订单，3补录订单，4积分订单，5余额订单
  if(item.order_type == '1'){
    return '普通订单'
  }else if(item.order_type == '2'){
    return '月卡支付'
  }else if(item.order_type == '3'){
    return '补录订单'
  }
  else if(item.order_type == '4'){
    return '积分订单'
  }
  else if(item.order_type == '5'){
    return '余额订单'
  }
}
const setPaypal_type = (item) =>{
  
//   支付类型，1微信支付、2支付宝支付、3余额支付、4月卡支付丶5积分支付
  if(item.paypal_type == 1){
    return '微信支付'
  }else if(item.paypal_type == 2){
    return '支付宝支付'
  }else if(item.paypal_type == 3){
    return '余额支付'
  }else if(item.paypal_type == 4){
    return '月卡支付'
  }else if(item.paypal_type == 5){
    return '积分支付'
  }
}


const storeOptions = ref([])
async function storeList() {
    const res: any = await api.storeListApi({
      pageNum:1,
      pageSize:300
    })
    if (res.code == 200) {
      storeOptions.value = res.data.list
    }
    
}
const orderLogList = ref([])
async function orderLog() {
    const res: any = await api.orderLogApi({
      order_id:detailsData.value.order_id,
    })
    if (res.code == 200) {
      orderLogList.value = res.data.list
    }
    
}

const setStore = (item) =>{
  for (let index = 0; index < storeOptions.value.length; index++) {
    if(storeOptions.value[index].businessId == item.business_id){
      return storeOptions.value[index].businessName
      break;
    }
  }
}

const setStore1 = (item) =>{
  for (let index = 0; index < storeOptions.value.length; index++) {
    if(storeOptions.value[index].businessId == item.business_id){
      return storeOptions.value[index].otherConfigJson? Https()+JSON.parse(storeOptions.value[index].otherConfigJson).logo:''
      break;
    }
  }
}

const setStore2 = (item) =>{
  for (let index = 0; index < storeOptions.value.length; index++) {
    if(storeOptions.value[index].businessId == item.business_id){
      return JSON.parse(storeOptions.value[index].otherConfigJson).address
      break;
    }
  }
}

const setStore3 = (item) =>{
  for (let index = 0; index < storeOptions.value.length; index++) {
    if(storeOptions.value[index].businessId == item.business_id){
      return JSON.parse(storeOptions.value[index].otherConfigJson).phone
      break;
    }
  }
}

const setdistribution_type = (item) =>{
    console.log(12321,item.goods_info)
   if(item.goods_info?.distributionType == '固定邮费'){
        return `￥${item.goods_info?.distributionFee}`
   }else
   return '包邮'
}
const useCoupons = () =>{
    console.log(12321321,Coupons.value.moneys)
    return `优惠:￥${Coupons.value.moneys}`
}
const Coupons = ref('')

async function useCouponsGet(){
  const res: any = await api.useCouponsApi({
    openid:detailsData.value.user_info.openid,
    coupons_id:detailsData.value.coupon_id
  })
  if(res.code == 200){
      console.log(12312321,res.data.list)
    Coupons.value = res.data.list[0]
   
  }

}
const setAddress = (address_id) =>{
  
    if(user_address.value.length){
        console.log(user_address.value)
        return user_address.value[0].address + user_address.value[0].details
    }else
        
    // }
   return '未设置地址'
}

onMounted(()=>{
    storeList();
    orderDetails()
  
})

const user_address = ref('')
async function findAddress(){
  const res: any = await api.findAddressApi({
    openid:detailsData.value.user_info.openid,
    address_id:detailsData.value.address_id
  })
  if(res.code == 200){
    user_address.value = res.data.list
  } 

}

async function orderDetails(){
  const res: any = await api.orderDetailsApi({
    id:route.query.id
  })
  if(res.code == 200 &&  res.data.list){

    detailsData.value = res.data.list[0]
    detailsData.value.goods_info = JSON.parse(detailsData.value.goods_info)
    detailsData.value.user_info = JSON.parse(detailsData.value.user_info)
    if(detailsData.value.business_info)
        detailsData.value.business_info = JSON.parse(detailsData.value.business_info)
    if(detailsData.value.goods_sku){
        detailsData.value.goods_sku = JSON.parse(detailsData.value.goods_sku)
        
    }
    findAddress();
    useCouponsGet();
      orderLog();
  } 

}

const detailsData = ref({
    otderType:3
})

</script>
<style scoped>
    .detailsBg{
        /* display: flex;
        justify-content: center;
        items-center:center; */
         height: 100vh;
        overflow-y: auto;
    }
    .detailsBox{
        display: grid;
        /* grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); */
        grid-template-columns: repeat(8, 1fr);
        /* grid-auto-rows: 110px; */
        /* gap: 10px; */
        
    }
    .detailsItem{
        border: 1px solid #eee;
        padding: 20px;
        
        position: relative;
        color: #e77777;
        font-weight: 700;
    }
    .Image{
        height: 32px;
        width: 32px;
    }
    .ImageDui{
        height: 24px;
        width: 24px;
        position: absolute;
        right: 20px;
        bottom: 20px;
    }
    .content{
        color: rgb(121, 128, 125);
        display: flex;
        gap: 10px;
        margin: 20px;
        font-size: 14px;
        flex-direction: column;
    }
    .contentItem{
        display: flex;
    }
    .cotentBox{
        display: grid;
        /* grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); */
        grid-template-columns: repeat(2, 1fr);
    }
</style>
